import React, { PureComponent } from 'react'
import './TransitionGroup.css'
import { TransitionGroup, CSSTransition } from 'react-transition-group'
export default class TransitionGroupCpn extends PureComponent {
  constructor(props) {
    super(props)
    this.state = {
      items: ["apple", 'orange', 'pear'],
    }
  }
  handleAdd() {
    this.setState(prevState => ({
      items: [...prevState.items, 'banana'],
    }))
  }
  handleRemove() {
    if (this.state.items.length > 0) {
      this.setState(prevState => ({
        items: [...prevState.items.slice(0, -1)],
      }))
    }
  }
  render() {
    return (
      <div>
        <TransitionGroup>
          {this.state.items.map((item, index) => (
            <CSSTransition key={index} timeout={500} classNames="item"><div>{item}</div></CSSTransition>
          ))}
        </TransitionGroup>
        <button onClick={(e) => this.handleAdd(e)}>Add</button>
        <button onClick={(e) => this.handleRemove(e)}>Remove</button>
      </div>
    )
  }
}
